
<template>
  <!-- 组件管理页面 -->
  <div class="editor__component editor__component_new">
    <div class="editor_component_top">
      <div class="top_button" :class="activeName == 'first' ? 'top_button_change' : ''" @click="activeName = 'first'">
        基本组件
      </div>
      <div class="top_button" :class="activeName == 'second' ? 'top_button_change' : ''" @click="activeName = 'second'">
        营销组件
      </div>
    </div>
    <div class="editor_component_wrap">
      <el-scrollbar style="height: 85%">
        <div class="editor_component_wrap_main">
          <div class="component_title" @click="first = !first">
            <div :class="first ? 'jiantou_bot' : 'jiantou_right'"></div>
            <div class="component_title_text">基本组件</div>
          </div>
          <draggable class="component_box" v-show="first" v-model="components" :options="{
              group: { name: 'component', pull: 'clone' },
              sort: false,
            }" animation="300" @add="componentAdd" :clone="componentClone">
            <transition-group>
              <div style="width:93px" v-for="component of components" :key="component.value">
                <div class="component--item" @click="handleAddComponent(component)">
                  <div class="iconfont component--item--icon" :class="`icon${component.icon}`"></div>
                  <span>{{ component.label }}</span>
                </div>
              </div>
            </transition-group>
          </draggable>
          <div class="component_title" @click="second = !second">
            <div :class="second ? 'jiantou_bot' : 'jiantou_right'"></div>
            <div class="component_title_text">营销组件</div>
          </div>
          <draggable class="component_box" v-show="second" v-model="components2" :options="{
              group: { name: 'component', pull: 'clone' },
              sort: false,
            }" animation="300" @add="componentAdd2" :clone="componentClone">
            <transition-group>
              <div style="width:93px" v-for="component of components2" :key="component.value">
                <div class="component--item" @click="handleAddComponent(component)">
                  <div class="iconfont component--item--icon" :class="`icon${component.icon}`"></div>
                  <span>{{ component.label }}</span>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";
import { IComponentItem, IComponent } from "./interfaces/component";
import EdtiorFormData from "./compontents/index/formModel";
import { Getter } from "vuex-class";

import draggable from "vuedraggable";

@Component({
  components: {
    draggable,
  },
})
export default class DecorationComponent extends Vue {
  activeName = "first";

  first = true;

  second = true;

  @Getter("global/isMall") isMall;

  /** 普通组件 */
  components: IComponentItem[] = [
    {
      icon: "lunbotu",
      value: "HomeSwiper",
      label: "轮播图",
    },
    {
      icon: "lunbotu",
      value: "GoodSwiper",
      label: "商品轮播图",
    },
    {
      icon: "shangpin",
      value: "Goods",
      label: "商品",
    },
    {
      icon: "sousuo",
      value: "Search",
      label: "搜索",
    },
    {
      icon: "biaotilan",
      value: "TitleBar",
      label: "标题栏",
    },
    {
      icon: "zhanweifu",
      value: "BlankPaceholder",
      label: "空白占位",
    },
    {
      icon: "fengefu",
      value: "Separator",
      label: "分隔符",
    },
    {
      icon: "dianpudaohang",
      value: "StoreNavigation",
      label: "店铺导航",
    },
    {
      icon: "mofang",
      value: "CubeBox",
      label: "魔方",
    },
    {
      icon: "28fuwenbenkuang",
      value: "RichText",
      label: "富文本",
    },
    {
      icon: "tupian",
      value: "ImageCom",
      label: "图片",
    },
    {
      icon: "zhibo1",
      value: "VideoCom",
      label: "视频",
    },
  ];

  /** 营销组件 */
  components2: IComponentItem[] = [
    {
      icon: "youhuiquan",
      value: "Coupon",
      label: "优惠券",
      showType: true,
    },
    {
      icon: "pintuan",
      value: "SpellGroup",
      label: "拼团",
      showType: this.$store.getters["global/isGroup"],
    },
    {
      icon: "jielong",
      value: "Chain",
      label: "接龙",
      showType: true,
    },
    {
      icon: "zhibo1",
      value: "HomeLive",
      label: "直播",
      showType: true,
    },
  ];

  componentsStart: IComponentItem[] = [];

  componentsStart2: IComponentItem[] = [];

  /**
   * 获取当前页面操作栏目
   */
  get activePageType() {
    return this.$store.state.decoration.activePageType;
  }

  mounted() {
    this.componentsStart = this.components;
    this.componentsStart2 = this.components2;
  }

  @Emit("change")
  handleAddComponent(currentComponent: IComponentItem): IComponent {
    if (this.activePageType === "bussiness") {
      return;
    } else {
      const FormData = EdtiorFormData[currentComponent.value];
      console.log("新增图片属性", {
        ...currentComponent,
        id: Date.now(),
        formData: new FormData(),
      });
      return { ...currentComponent, id: Date.now(), formData: new FormData() };
    }
  }

  componentClone(currentComponent: IComponentItem) {
    const FormData = EdtiorFormData[currentComponent.value];
    return {
      ...currentComponent,
      id: Date.now(),
      formData: new FormData(),
    };
  }

  componentAdd() {
    this.components = this.componentsStart;
  }

  componentAdd2() {
    this.components2 = this.componentsStart2;
  }
}
</script>
<style lang="scss">
@import "@/assets/styles/decoration/editorPage";
.component--item--icon {
  font-size: 28px;
  text-align: center;
  margin-bottom: 19px;
}
.editor__component_new .is-horizontal {
  display: none;
  overflow-x: hidden;
}
</style>
